<template>
  <ContentWrap>
    <div class="big_div">
      <div>
        <el-steps :active="active" finish-status="success">
          <el-step v-for="item in stepTitles" :key="item" :title="item" />
        </el-steps>
      </div>
      <div v-show="step1_content_show" class="step_content_div">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item :label="formItemLabel.did" prop="did">
            <el-select
              v-model="ruleForm.did"
              placeholder="请选择司机"
              filterable
              @click="getDriverList"
            >
              <el-option v-for="item in driverList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="formItemLabel.vid" prop="vid">
            <el-select
              v-model="ruleForm.vid"
              placeholder="请选择运输车辆"
              filterable
              @click="getVehicleList"
            >
            <el-option v-for="item in vehicleList" :key="item.id" :label="item.type + ':' + item.number" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="formItemLabel.time" prop="time" required>
            <el-date-picker
              v-model="ruleForm.time"
              type="datetime"
              placeholder="请选择送达时间"
            />
          </el-form-item>
          <el-form-item :label="formItemLabel.urgent" prop="urgent">
            <el-switch v-model="ruleForm.urgent" />
          </el-form-item>
          <el-form-item :label="formItemLabel.care" prop="careArr">
            <el-checkbox-group v-model="ruleForm.careArr">
              <el-checkbox label="冰柜冷藏" name="冰柜冷藏"/>
              <el-checkbox label="注意易碎" name="注意易碎"/>
              <el-checkbox label="防止高温" name="防止高温"/>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item :label="formItemLabel.phone" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入客户电话" />
          </el-form-item>
          <el-form-item :label="formItemLabel.address" prop="address">
            <el-input v-model="ruleForm.address" type="textarea" placeholder="请输入客户地址" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="next(ruleFormRef)">下一步</el-button>
            <!--<el-button type="primary" @click="submitForm(ruleFormRef)">
              Create
            </el-button>-->
            <!--<el-button @click="resetForm(ruleFormRef)">Reset</el-button>-->
          </el-form-item>
        </el-form>
      </div>
      <div v-show="step2_content_show" class="step_content_div">
        <el-form label-width="120px">
          <el-form-item :label="formItemLabel.did">
            <span>{{ ruleForm.dname }}</span>
          </el-form-item>
          <el-form-item :label="formItemLabel.vid">
            <span>{{ ruleForm.vname }}</span>
          </el-form-item>
          <el-form-item :label="formItemLabel.time">
            <span>{{ ruleForm.time }}</span>
          </el-form-item>
          <el-form-item :label="formItemLabel.urgent">
            <span>{{ ruleForm.urgent }}</span>
          </el-form-item>
          <el-form-item :label="formItemLabel.care">
            <span>{{ ruleForm.care }}</span>
          </el-form-item>
          <el-form-item :label="formItemLabel.phone">
            <span>{{ ruleForm.phone }}</span>
          </el-form-item>
          <el-form-item :label="formItemLabel.address">
            <span>{{ ruleForm.address }}</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="previous">上一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="step3_content_show">
        <el-col>
          <el-result
            icon="success"
            title="申请提交成功！"
            sub-title=""
          >
            <template #extra>
              <el-button type="primary" @click="continueApply(ruleFormRef)">继续申请</el-button>
            </template>
          </el-result>
        </el-col>
      </div>
    </div>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { formatDate } from '@/utils/formatTime'
import { DriverApi, DriverVO } from '@/api/wms/driver'
import { VehicleApi, VehicleVO } from '@/api/wms/vehicle'
import { DistributionApi, DistributionVO } from '@/api/wms/distribution'

const stepTitles = reactive(['填写申请信息', '确认配送信息', '完成申请'])

// 步骤条内容显示标志，每个步骤只能显示一个
const step1_content_show = ref(true)
const step2_content_show = ref(false)
const step3_content_show = ref(false)

const active = ref(1)
/** 下一步 */
const next = async (formEl: FormInstance | undefined) => {
  // 表单校验
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('next!')
      // 切换步骤内容
      active.value++
      if (active.value == 1) {
        step3_content_show.value = false
        step1_content_show.value = true
      }
      if (active.value == 2) {
        step1_content_show.value = false
        step2_content_show.value = true
      }

      // 通过did获取dname司机姓名，方便step2展示
      const filterArr = driverList.value.filter(item => item.id === ruleForm.did)
      ruleForm.dname = filterArr[0].name

      // 通过vid获取vname车辆类型+车牌号，方便step2展示
      const filterArr2 = vehicleList.value.filter(item => item.id === ruleForm.vid)
      ruleForm.vname = filterArr2[0].type + ':' + filterArr2[0].number

      // 格式化“预计送达时间”
      ruleForm.time = formatDate(new Date(ruleForm.time))

      // careArr元素通过逗号拼接
      ruleForm.care = ruleForm.careArr.join(',')

    } else {
      console.log('error next!', fields)
    }
  })
}

// 表单项标签
const formItemLabel = reactive({
  did: '司机:',
  vid: '运输车辆:',
  time: '预计送达时间:',
  urgent: '加急处理:',
  care: '注意事项:',
  phone: '客户电话:',
  address: '客户地址:',
})

/** 上一步 */
const previous = () => {
  active.value--
  if (active.value == 1) {
    step2_content_show.value = false
    step1_content_show.value = true
  }
  if (active.value == 2) {
    step3_content_show.value = false
    step2_content_show.value = true
  }
}


interface RuleForm {
  did: string // 驾驶员id
  dname: string // 驾驶员姓名，仅用于step2展示
  vid: string // 车辆id
  vname: string // 车辆类型+车牌号，仅用于step2展示
  time: string // 预计送达时间
  urgent: boolean // 是否加急处理
  careArr: string[] // 注意事项列表
  care: string // 注意事项
  phone: string // 客户电话
  address: string // 客户地址
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  did: '',
  dname: '',
  vid: '',
  vname: '',
  time: '',
  urgent: false,
  careArr: [],
  care: '',
  phone: '',
  address: '',
})

const rules = reactive<FormRules<RuleForm>>({
  did: [
    {
      required: true,
      message: '司机不能为空',
      trigger: 'change',
    },
  ],
  vid: [
    {
      required: true,
      message: '运输车辆不能为空',
      trigger: 'change',
    },
  ],
  time: [
    {
      type: 'date',
      required: true,
      message: '送达时间不能为空',
      trigger: 'change',
    },
  ],
  phone: [
    { required: true, message: '客户电话不能为空', trigger: 'blur' },
    { min: 11, max: 11, message: '长度应为11位', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '客户地址不能为空', trigger: 'blur' },
  ],
})

const submitForm = async () => {
  // 提交表单到后端接口
  console.log("提交数据：", ruleForm)
  try {
    await DistributionApi.createDistribution(ruleForm as unknown as DistributionVO)
    // 切换到下一步，这边就是最后一步，即完成申请
    active.value = 3
    step2_content_show.value = false
    step3_content_show.value = true
  } finally {
  }
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

/** 按钮事件-继续申请 */
const continueApply = (formEl: FormInstance | undefined) => {
  // 切换步骤内容
  active.value = 1
  step3_content_show.value = false
  step1_content_show.value = true

  // 清空表单内容
  resetForm(formEl)
}

/** 获取“司机”选择器数据 */
const driverList = ref<DriverVO[]>([])
const getDriverList = async () => {
  const data = await DriverApi.getDriverList()
  // console.log(data)
  driverList.value = data
}

/** 获取“运输车辆”选择器数据 */
const vehicleList = ref<VehicleVO[]>([])
const getVehicleList = async () => {
  const data = await VehicleApi.getVehicleList()
  // console.log(data)
  vehicleList.value = data
}


onMounted(() => {
  getDriverList()
  getVehicleList()
})
</script>

<style lang="scss">

.big_div {
  margin-left: 180px;
  margin-right: 180px;
  margin-top: 40px;
  margin-bottom: 40px
}

.step_content_div {
  margin-left: 120px;
  margin-right: 120px;
  margin-top: 40px;
  margin-bottom: 40px
}

</style>


